<template>
  <div class="my-map-base-layers" v-bind="$attrs">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="my-map-base-layers__item"
      :class="{ active: activeIndex === index }"
      @click="handleClick(item, index)"
    >
      <img :src="item.preview" />
      <span class="my-map-base-layers__title">{{ item.title }}</span>
    </div>
  </div>
</template>

<script>
/**
 * 切换地图图层组件
 */
import { createLayer } from '../libs/layers'

export default {
  name: 'MapBaseLayers',
  inject: ['myMap'],
  /**
   * 属性参数, 继承
   * @member props
   * @property {array} [layers] 图层列表
   * @property {string} [layers.title] 图层标题
   * @property {string} [layers.preview] 图层选项预览图
   * @property {string} [layers.type] 图层ID 或 获取图层的方法
   * @property {number} [defaultActiveIndex] 默认激活图层索引
   */
  props: {
    // [{title, preview, adapter}]
    layers: {
      type: Array,
      default () {
        return []
      }
    },
    // 默认激活图层索引
    defaultActiveIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      activeIndex: 0
    }
  },
  computed: {
    list () {
      return this.layers.map((item) => {
        return {
          title: item.title,
          preview: item.preview,
          adapter: item.adapter,
          layer: createLayer(item)
        }
      })
    }
  },
  watch: {
    defaultActiveIndex: {
      immediate: true,
      handler (val) {
        this.activeIndex = val
      }
    }
  },
  methods: {
    change (item) {
      const { map } = this.myMap
      const layer = this.myMap.getLayer()
      if (layer) {
        map.removeLayer(layer)
      }
      if (item.layer) {
        item.layer.__MY_LAYER__ = true
        item.layer.setZIndex(0)
        map.addLayer(item.layer)
      }
      this.$emit('change', item)
      this.myMap.$emit('map-base-layers:change', item.adapter)
    },
    handleClick (item, index) {
      this.activeIndex = index
      this.change(item)
    }
  }
}
</script>

<style lang="less">
.my-map-base-layers {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 1;
  display: flex;
  padding: 4px;
  background: @component-background;
  transition: all 0.3s;
  &:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
  img {
    display: block;
    border-radius: 2px;
  }
  &__item {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 3px;
    width: 86px;
    font-size: 14px;
    border: 1px solid @border-color-base;
    border-radius: 2px;
    cursor: pointer;
    .my-map-base-layers__title {
      border-radius: 2px 0 0;
      color: @text-color;
      background: @component-background;
    }
    &.active {
      border-color: @primary-color;
      .my-map-base-layers__title {
        color: @text-color-dark;
        background: @primary-color;
      }
    }
    &:hover {
      border-color: @primary-color;
      .my-map-base-layers__title {
        color: @text-color-dark;
        background: @primary-color;
      }
    }
  }
  &__title {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 1px 4px;
    color: @text-color;
  }
}
</style>
